<template>
	<view class="content">
		<view class="width-full" :style="{
			  backgroundImage: `url('${bgpic}')`,
			  backgroundSize: '100% 100%',
			  height:'480rpx'
			}">
			<view class="arr" @click='beforeleave'>
				<up-icon name="arrow-left" color="#fff" size="20"></up-icon>
			</view>

		</view>

		<view class="story-main box-sizing" style='padding: 20rpx 30rpx;'>
			<view class="flex space-between items-center">
				<view class="flex">
					<image :src="list.avatar" mode="" style="width: 36rpx; height: 36rpx;border-radius: 50%;"></image>
					<view class="fontSize-28 color-333 marginLeft-10">
						{{list.username}}
					</view>
				</view>
				<view class="text-right fontSize-28 color-666">
					{{list.time}}
				</view>
			</view>

			<view class="fontSize-28 color-333 weight-700 marginTop-32">
				<span v-html='list.english_story'></span>
			</view>
			<view class="fontSize-28 color-999 marginTop-350" v-if="story_pics.length!=0">
				故事抄写
			</view>
			<view class="warp flex flex-wrap">
				<image :src="item" mode="" @click="imgPreview(item)" style="height: 400rpx; height: 400rpx;"
					v-for="(item,index) in story_pics" class="marginLeft-10 marginBottom-10"></image>
			</view>

			<view class="fontSize-28 color-999 marginTop-60" v-if="audioUrl != ''">
				故事录制
			</view>
			<view class="marginTop-20 " v-if="audioUrl != ''">
				<view class="">
					<!-- 调速拉条区 -->
					<view class="audio-progress">
						<!-- <image src="./icon/get-back.svg" @click="onSeek(-15)"></image> -->
						<view class="audio-bar">
							<up-slider v-model="currentTime" activeColor="#00CA86" :min="0" :max="duration"
								block-color="#00CA86" block-size="18" @change="sliderChange" @changing="sliderChanging">
							</up-slider>
						</view>
					</view>
					<!-- 显示时间进度区 -->
					<view class="bar-tips">
						<text>{{minTimeFmt(currentTime)}}</text>
						<text>{{minTimeFmt(duration)}}</text>
					</view>
					<!-- 按钮区 -->
					<view class="audio-btn">
						<view class="play-box">
							<view class="play-btn" :style="{backgroundColor:isPaused?'#00CA86':'#475266'}"
								@click="onPlayPause">
								<image v-show="isPaused" src="../../static/image/suspend.svg"></image>
								<image v-show="!isPaused" src="../../static/image/start.svg"></image>
							</view>
						</view>
					</view>
					<!-- <le-audio :activeIndex="0" :audioData="audioList"
						 :autoplay="false" v-if='isFinish == true'></le-audio> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app';
	const getStoryInfoApi = inject('getStoryInfo')
	const speakRemStoryApi = inject('speakRemStory')

	const page = ref(1)
	const big_sort = ref(1)
	const small_sort = ref(1)
	const list = ref({})
	const bgpic = ref('')
	const deleteShow = ref(false)
	const backShow = ref(false)
	const finishShow = ref(false)
	const imgShow = ref(false)
	const isShowPage = ref(true)

	const finish_num = ref(1)

const audioUrl = ref('');
	const recorderManager = ref(null);
	// 创建内部音频上下文实例的引用
	const innerAudioContext = uni.createInnerAudioContext();
	// 创建存储录音文件路径的变量
	const story_audio = ref('');
	const isSpeak = ref(false)
	const isOpen = ref(false)
	const isFinish = ref(false)
	// 音频时间
	const timer = ref(null);
	// 状态
	const audioStatus = ref(false);
	//重置
	const reset = ref(false);
	//播放状态
	const isPlaying = ref(false);
	const audioList = ref([])
	const story_pics = ref([])
	// 录音结束的函数
	const currentTime = ref(0) //当前时长
	const isPaused = ref(true)
	const duration = ref(0);
	onLoad((op) => {
		page.value = op.page
		big_sort.value = op.big_sort
		small_sort.value = op.small_sort
		getStoryInfoApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value

		}).then(res => {
			list.value = res
			bgpic.value = res.bgpic
		
			story_pics.value = res.story_pics
			duration.value = res.duration
				audioUrl.value = res.story_audio
		})


	})
	// 在组件挂载后绑定音频播放结束事件监听
	onMounted(() => {
		innerAudioContext.onEnded(onAudioEnded);
	});






	const imgPreview = (url) => {
		uni.previewImage({
			urls: [url]
		})
	}
	// 监听音频播放结束事件的函数
	const onAudioEnded = () => {
		console.log('音频播放结束');
		isPlaying.value = false;
		isOpen.value = false;
		currentTime.value = 0
			isPaused.value = true;
			if (timer.value) clearInterval(timer.value);
	}
	// 切换音频播放状态的函数
	const togglePlay = () => {
		if (isPlaying.value) {
			console.log('暂停播放');
			isPlaying.value = false; // 暂停播放
			innerAudioContext.pause();
		} else {
			console.log('继续播放');
			isPlaying.value = true; // 继续播放
			innerAudioContext.play();
		}
		isOpen.value = !isOpen.value; // 切换图片显示状态
	};


	const beforeleave = () => {
		uni.navigateBack()
	}
	const toPage = () => {
		backShow.value = false
		uni.navigateBack()

	}
	const toStudyReport = () => {
		uni.navigateTo({
			url: "/pagesA/reciteWords/myStudyReport?big_sort=" +
				big_sort.value +
				"&page=" +
				page.value +
				"&small_sort=" +
				small_sort.value
		});

	}

	const minTimeFmt = (val) => {
		let minute = parseInt(val / 60);
		let seconds = Math.ceil(val % 60)
		return `${minute>=10?minute:'0'+minute}:${seconds>=10?seconds:'0'+seconds}`
	};

	const isSlidering = ref(false) //是否移动中
	// 录音播放暂停
	// 滑块滚动到的位置
	const sliderChange = (e) => {
		isSlidering.value = false;
		currentTime.val = e.detail.value;
		innerAudioContext.seek(e.detail.value);
	}
	// 滑块滚动到的位置 实时
	const sliderChanging = (e) => {
		isSlidering.value = true;
		currentTime.val = e.detail.value;
	}
	// 暂停播放切换
	const onPlayPause = () => {
		if (isPaused.value) {
			timer.value = setInterval(() => {
				currentTime.value++;
			}, 1000);
			innerAudioContext.src = audioUrl.value
			innerAudioContext.play()
			isPaused.value = false;
		} else {
			innerAudioContext.pause()
			isPaused.value = true;
			if (timer.value) clearInterval(timer.value);
		}
	}
</script>

<style scoped lang="scss">
	.story-main {
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		margin: 0 auto;
		margin-top: -100rpx;
		position: relative;
	}

	.btn {
		width: 702rpx;
		height: 104rpx;
		background: #51D580;
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		text-align: center;
		line-height: 104rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.speak-block {
		width: 100%;
		height: 400rpx;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 50rpx 24rpx;
		box-sizing: border-box;

	}

	.btn1 {
		width: 340rpx;
		height: 104rpx;
		background: #CCCCCC;
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		text-align: center;
		line-height: 104rpx;
		color: #FFFFFF;
	}

	.upload-block {
		position: absolute;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 626rpx;
		height: 90rpx;
		background: #F5F5F5;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 22rpx;
		box-sizing: border-box;
	}

	.popup_bg {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;
		overflow: hidden;

		.btn-block {
			width: 252rpx;
			height: 92rpx;
			background: #CCCCCC;
			border-radius: 74rpx;
			text-align: center;
			line-height: 92rpx;
			color: #fff;
		}

	}

	.popup_bg.bg2 {
		width: 574rpx;
		height: 676rpx;
		background: url('https:\/\/bbsf.oss-cn-shanghai.aliyuncs.com\/english\/jiword\/zswc.png') no-repeat;
		background-size: 100% 100%;
		padding: 32rpx;
		box-sizing: border-box;

		.btn-block {
			width: 100%;
			background: #51D580;
			margin-top: 80rpx;
		}
	}

	.arr {
		position: absolute;
		left: 22rpx;
		top: 120rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.audio-progress {
		display: flex;
		align-items: center;
		justify-content: space-between;


		.audio-bar {
			flex: 1;
			padding: 0 26rpx;
			box-sizing: border-box;

			.audio-slider {
				margin: 0 !important;
			}
		}
	}

	.bar-tips {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 74rpx;
		margin-bottom: 32rpx;
		color: #B8BECC;
		font-size: 24rpx;
		line-height: 10rpx;
	}

	.audio-btn {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 64rpx;

		image {
			width: 48rpx;
			height: 48rpx;
		}

		.play-box {
			display: flex;
			align-items: center;
			position: relative;
			left: 50%;
			transform: translateX(-50%)
		}

		.play-btn {
			width: 96rpx;
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 64rpx;
			background: #475266;
			border-radius: 50%;

			image {
				width: 96rpx;
				height: 96rpx;
			}
		}

		.play-list-text {
			position: absolute;
			bottom: 0;
			left: -14rpx;
			color: #475266;
			font-size: 20rpx;
		}

		.speed-text {
			position: absolute;
			top: 20rpx;
			right: 0;
			color: #475266;
			font-size: 16rpx;
			font-weight: 600;
		}
	}
</style>